{% extends "base.html" %}
{% load i18n %}

{% block head-css-ext %}
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/datePicker.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/demo.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery.autocomplete.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
  <!-- jQuery -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
  <!-- required plugins -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/date.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/date_es.js"></script>
  <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
  <!-- jquery.datePicker.js -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.datePicker.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.autocomplete.js"></script>
{% endblock %}

{% block head-js-embedded %}
  <script type="text/javascript" charset="utf-8">
    $.dpText = {
              //TEXT_PREV_YEAR : 'DE Previous year',
              //TEXT_PREV_MONTH : 'DE Previous month',
              //TEXT_NEXT_YEAR : 'DE Next year',
              //TEXT_NEXT_MONTH : 'DE Next month',
              //TEXT_CLOSE : 'DE Close',
              TEXT_CHOOSE_DATE : 'Escoger Fecha'
    } 
    Date.firstDayOfWeek = 0;
    Date.format = 'yyyy-mm-dd';
    $(document).ready(function(){
      
      $('.date-pick').datePicker({
        startDate:'1900-01-01',
        clickInput:true
      });
      
      $('#nombrecliente').autocomplete('/ajax/buscarcliente/', {
        multiple: true,
        dataType: 'json',
        width: 300,
        parse: function(data){
          return $.map (data, function(row) {
            return {
              data: row,
              result: row[0]
            }
          });
        }
      }).result(function(event, data, formatted) {
        $('#nombrecliente').val(data[0]);
        $('#cliente').val(data[1]);
      });
            
    });
  </script>
{% endblock %}


{% block content-box1 %}
<form method="post" action=".">
    <table>
        <tr>
          <td><label for="id_nombre">Nombre Cliente:</label>{% if form.nombre_cliente.errors %} <span class="error">{{ form.nombre_cliente.errors|join:", " }}</span>{% endif %}</td>
          <td>{{ form.nombre_cliente }}</td>
        </tr>
        <tr>
          <td><label for="id_apellido">Fecha Compra:</label>{% if form.fecha.errors %} <span class="error">{{ form.fecha.errors|join:", " }}</span>{% endif %}</td>
          <td>{{ form.fecha }}</td>
        </tr>
        {{ form.cliente }}
        
    </table>
    <input type="submit" value="{% trans 'Submit' %}" />
</form>
{% endblock %}
